<script lang="ts" setup>
	import { reactive, ref } from 'vue'
	const formData = reactive({
		username: '',
		password: '',
		email: '',
		code: ''
	});

	const ruleForm = ref<any>(null)

	const rules = ref({
		username: [
			{ required: true, message: '请输入账号' },
		],
		password: [
			{ required: true, message: '请输入密码' },
		],
		email: [
			{ required: true, message: '请输入邮箱' },
		],
		code: [
			{ required: true, message: '请输入验证码' },
		]
	})

	const handleSubmit = () => {
		ruleForm.value.validate().then(({ valid, errors } : any) => {
			if (valid)
				uni.navigateTo({
					url: '/pages/login/login'
				})
			else
				console.log('error submit!!', errors)
		})
	}
</script>

<template>
	<nut-transition :show="true" name="zoom" :duration="200">
		<view class="w-[100vw] h-[100vh] flex justify-center items-center flex-col">
			<!-- title -->
			<view class="title text-[teal]  font-bold">
				<text class="block text-center text-[32px]">ATOMNOTION</text>
				<text class="block text-center mt-[40rpx] text-[16px]"> 记录你的美好生活</text>
			</view>
			<!-- form -->
			<nut-form class="w-[440rpx]  mt-[20rpx] form_box" ref="ruleForm" :model-value="formData" :rules="rules">
				<nut-form-item prop="username">
					<view
						class="inp_box w-full h-[60rpx] flex justify-center items-center pl-[16rpx] border rounded-full border-[teal]">
						<nut-input v-model="formData.username" class="nut-input-text" placeholder="请输入账号" type="text">
							<template #left>
								<image src="/static/icon/username.png" class="w-[24rpx] h-[24rpx]" mode=""></image>
							</template>
						</nut-input>
					</view>
				</nut-form-item>
				<nut-form-item prop="password">
					<view
						class="inp_box w-full h-[60rpx] flex justify-center items-center pl-[16rpx] border rounded-full border-[teal]">
						<nut-input v-model="formData.password" class="nut-input-text" placeholder="请输入密码" type="text">
							<template #left>
								<image src="/static/icon/password.png" class="w-[24rpx] h-[24rpx]" mode=""></image>
							</template>
						</nut-input>
					</view>
				</nut-form-item>
				<nut-form-item prop="email">
					<view
						class="inp_box w-full h-[60rpx] flex justify-center items-center pl-[16rpx] border rounded-full border-[teal]">
						<nut-input v-model="formData.email" class="nut-input-text" placeholder="请输入邮箱" type="text">
							<template #left>
								<image src="/static/icon/email.png" class="w-[24rpx] h-[24rpx]" mode=""></image>
							</template>
						</nut-input>
					</view>
				</nut-form-item>

				<nut-form-item prop="code">
					<view
						class="inp_box w-full h-[60rpx] flex justify-center items-center pl-[16rpx] border rounded-full border-[teal]">
						<nut-input v-model="formData.code" class="nut-input-text" placeholder="请输入验证码" type="text">
							<template #left>
								<image src="/static/icon/code.png" class="w-[24rpx] h-[24rpx]" mode=""></image>
							</template>
						</nut-input>
					</view>
				</nut-form-item>
				<nut-form-item>
					<view class="w-full flex justify-center items-center">获取验证码</view>
				</nut-form-item>
				<nut-form-item>
					<nut-transition :show="true" name="fade-left" :duration="1000">
						<view class="w-full flex justify-center items-center">
							<nut-animate type="flicker" :loop="true">
								<nut-button type="primary" size="small" class='w-[200rpx] h-[60rpx]'
									@click="handleSubmit">
									注册
								</nut-button>
							</nut-animate>

						</view>
					</nut-transition>

				</nut-form-item>

			</nut-form>

		</view>
	</nut-transition>

</template>

<style lang="scss">
	.form_box {
		:deep(.nut-cell-group__wrap) {
			box-shadow: none !important;
			border-radius: none !important;
		}

		:deep(.nut-cell) {
			background-color: transparent;
		}

		:deep(.nut-form-item.error.line::before),
		:deep(.nut-form-item.error.line::after) {
			border: none !important;
		}
	}
</style>